<template>
  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px 5px' }">
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">友情链接</span>
      </div>
    </template>

    <div class="flinks">
      <div
        class="flink"
        v-for="it in data.links"
        :key="it.id"
        @click="flink(it)"
      >
        <span :title="it.title">{{ it.title }}</span>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import HotTutorialList from "./HotTutorialList.vue";
import { ref, computed, defineProps, onBeforeMount } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const act = ref(props.data.typeSoftVos[0]);

const flink = (it) => {
  window.open(it.url);
};

// const act.softVoList = computed(() => act.softVoList || []);
// const rightValue = computed(() => props.data[act.value.hotkey]);
</script>

<style lang="less" scoped>
.flinks {
  display: flex;
  flex-flow: wrap;
  flex-wrap: row;
  padding: 10px 10px 20px 10px;

  .flink {
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;

    span {
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      color: #1d2127;
      line-height: 14px;

      &:hover {
        color: @link-color;
      }
    }
  }
}

.rjfl-tabs {
  display: flex;
  justify-content: flex-start;
  flex: 1;
  padding-left: 80px;
  .tab {
    display: flex;
    position: relative;
    justify-content: center;
    width: 100px;
    cursor: pointer;
    span {
      font-size: 16px;
      font-weight: 500;
      color: #93999e;
      line-height: 16px;
    }
  }

  .act {
    span {
      color: @theme-color;
    }
  }
  .act:after {
    position: absolute;
    content: " ";
    border-bottom: 2px solid @theme-color;
    width: 32px;
    bottom: -19px;
  }
}
</style>
